<template>
  <div class="nav">
    <div>
      <!-- 二级路由 -->
      <router-view></router-view>
    </div>

    <van-tabbar
      v-model="active"
      active-color="#9C623A"
      inactive-color="#8A8A8A"
      route
      class="tabbar-nav"
    >
      <van-tabbar-item
        v-for="(item, i) in Navinfo"
        :key="i"
        :to="item.path"
        :badge="item.badge > 0 ? item.badge : ''"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.icon.active : item.icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "Nav",
  data() {
    return {
      active: 0,
    };
  },
  computed: {
    ...mapState(["shopBag", "isShopBag"]),
    Navinfo() {
      return [
        {
          title: "首页",
          icon: {
            active: require("../assets/images/home_active.png"),
            inactive: require("../assets/images/home.png"),
          },
          path: "/",
        },
        {
          title: "菜单",
          icon: {
            active: require("../assets/images/caidan_active.png"),
            inactive: require("../assets/images/caidan.png"),
          },
          path: "/menu",
        },
        {
          title: "购物袋",
          icon: {
            active: require("../assets/images/gouwudai_active.png"),
            inactive: require("../assets/images/gouwudai.png"),
          },
          path: "/bag",
          badge: this.shopBag,
        },
        {
          title: "我的",
          icon: {
            active: require("../assets/images/myself_active.png"),
            inactive: require("../assets/images/myself.png"),
          },
          path: "/myself",
        },
      ];
    },
  },

  created() {
    // 查询购物袋
    this.inquireBag();
  },
  methods: {
    ...mapMutations(["changeShopBag", "changeIsShopBag"]),
    // 查询购物袋订单
    inquireBag() {
      if (this.isShopBag) {
        console.log("Nav已经加载完成了");
        return;
      }

      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
       return;
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "get",
        url: this.baseUrl + "/shopcartRows",
        params: {
          appkey: this.appkey,
          tokenString: tokenString,
        },
      })
        .then((result) => {
          // console.log(result);
          this.$toast.clear();
          if (result.data.code == 700) {
           return ;
          }
          if (result.data.code === 8000) {
            this.changeShopBag(result.data.result);
            this.changeIsShopBag(true);
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.tabbar-nav {
  z-index: 10;
}
</style>
